<!DOCTYPE html>
<html>

<head>
    <script src="./js/zrender.js"></script>

    <title></title>
</head>
<body>
    <div id="container" style="height: 500px; width: 1000px;"></div>
    <script>
       var zr = zrender.init(document.getElementById('container'));
       var v = zr.getHeight();
       var e = zr.getWidth();
       var ear1=new zrender.Ellipse({
           shape:{
               cx:e /2+100,
               cy:v /2-100,
               rx:50,
               ry:40,
           },
            style:{

            },
            z : 1,
            rotation: -65,
            origin: [e/ 2+100, v / 2 - 100],
           
       });
       var ear2=new zrender.Ellipse({
           shape:{
               cx:e /2+200,
               cy:v /2-100,
               rx:50,
               ry:40,
           },
            style:{

            },
            z : 1,
            rotation: 75,
            origin: [e / 2+200, v / 2 - 100],
           
       });
       var face = new zrender.Circle({
           shape:{
                cx: e / 2+100,
                cy: v / 2+20,
                r:150,
           },
           style: {
                fill: "rgba(245,245,245,1)",
                stroke: "#0e0d0d",
                lineWidth: 6,
            },
            z: 1
       });
       var eye1=new zrender.Heart({
           shape:{
                cx: e / 2 + 140,
                cy: v / 2 - 40,
                width: 20,
                height: 35
            },
            style: {
                fill:'#ff0000'
            },
            z: 1
        });
       var eye2=new zrender.Heart({
        shape:{
                cx: e / 2 + 45,
                cy: v / 2 - 25,
                width: 20,
                height: 35
            },
            style: {
                fill:'#ff0000'
            },
            z: 1
        });
        var body_x=new zrender.Rect({
            shape:{
                x: e / 2 - 150,
                y: v / 2 + 65,
                r: [160, 160],
                width: 500,
                height: 700,
            },
            style: {

            },
            z: 0
        });
        var mouth_x=new zrender.BezierCurve({
            shape:{
                x1: e / 2 + 60,
                y1: v / 2 + 60,
                x2: e / 2 + 150,
                y2: v / 2 + 50,
                cpx1: e / 2 + 120,
                cpy1: v / 2 + 130,

            },
            style: {
                lineWidth: 12,
            },
            z: 1,
        });
        var hand1 = new zrender.Rect({
            shape: {
                x: e / 2 - 150,
                y: v / 2 + 65,
                r: [160, 160],
                width: 500,
                height: 100,
            },
            style: {

            },
            z: 0
        });
        var hand2 = new zrender.Rect({
            shape: {
                x: e / 2 - 150,
                y: v / 2 + 65,
                r: [160, 160],
                width: 500,
                height: 100,
            },
            style: {

            },
            z: 0
        });
        zr.add(ear1);
        zr.add(ear2);       
        zr.add(face);
        zr.add(eye1);
        zr.add(eye2);
        zr.add(mouth_x);
        zr.add(hand1);
        zr.add(hand2);   
        zr.add(body_x);
        
        

    </script>
       

</body>
</html>